<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>属性选择器</title>
	<style type="text/css">
		label[for]{
			color: red;
			font-size: 20px;
		}

		label[for='pwd']{
			color: yellow;
		}
		
		/*以...开头*/
		label[for^='vip']{
			font-size: 30px;
		}
		/*以...结尾*/
		label[for$='p2']{
			font-size: 20px;
		}
		label[for*='ser']{
			color: green;
		}

		input[type='text']{
			background-color: purple;
		}

	</style>
</head>
<body>
	
	<!-- 属性选择器 通常在 表单控件中 使用比较频繁-->
	<div class="box">
		<form action="">
			<label for="user">用户名：</label>
			<input type="text" name="" id="user">
			<label for="pwd">密码：</label>
			<label for="vip1">vip1</label>
			<label for="vip2">vip2</label>
			<label for="user2">用户名2：</label>
			<label for="user3">用户名3：</label>
		</form>
	</div>
</body>
</html>